<template>
	<view class="deposit-container">
		
		
		<z-paging ref="paging" v-model="recordList" @query="queryList">
			<template #top>
                <tn-navbar height="45px" home-icon="" :bottom-shadow="false" bg-color="tn-type-primary_bg" text-color="tn-white" >充值记录</tn-navbar>
				<!-- 搜索框 -->
				<view class="search-section">
					<tn-search-box
						v-model="searchKeyword"
						placeholder="搜索代理商名称"
						:show-action="false"
						:clearable="true"
						@search="handleSearch"
						@clear="handleClear"
					></tn-search-box>
					
					<!-- 时间选择 -->
					<!-- <view class="date-range">
						<view class="date-picker" @click="showStartCalendar = true">
							<text class="date-label">开始日期</text>
							<text class="date-value">{{startDate || '请选择'}}</text>
						</view>
						<text class="date-separator">至</text>
						<view class="date-picker" @click="showEndCalendar = true">
							<text class="date-label">结束日期</text>
							<text class="date-value">{{endDate || '请选择'}}</text>
						</view>
					</view> -->

                    <view class="tn-p tn-text-xl tn-white_bg" @click="openCalendarPopup">
                        日期范围：{{dataInfo.startDate}} 至 {{dataInfo.endDate}}
                    </view>

				</view>
			</template>
			
			<!-- 记录列表 -->
			<view class="record-list">
				<view class="record-item" v-for="(item, index) in recordList" :key="index">
					<view class="record-header">
						<view class="agent-info">
							<text class="agent-name">{{item.agentName}}</text>
							<text class="record-time">{{item.time}}</text>
						</view>
						<view class="record-amount" :class="{'amount-plus': item.amount > 0}">
							{{item.amount > 0 ? '+' : ''}}{{item.amount}}
						</view>
					</view>
					<view class="record-footer">
						<view class="record-type">
							<text class="type-text">{{item.type}}</text>
							<text class="balance-text">余额：{{item.balance}}</text>
						</view>
						<view class="record-status" :class="{'status-success': item.status === 'success'}">
							{{item.status === 'success' ? '充值成功' : '充值失败'}}
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
	
    <tn-popup v-model="showCalendarPopup" open-direction="top" class="popup-class">
	 
	    <tn-calendar v-model="selectDate" min-date="2024-01-01" mode="range" class="calendar-class"/>
	
	  
	  <view class="tn-mt tn-w-full tn-pb">
	    <tn-button
	      font-size="36"
	      custom-class="popup-calendar-button"
	      @click="closeCalendarPopupPage"
	    >
	      选择所选日期
	    </tn-button>
	  </view>
	</tn-popup>

</template>

<script setup>
import { ref, computed, onMounted ,reactive} from 'vue'
import { formatDate } from '@/utils/date.js'
import { postCall } from '@/api/index.js'
import { createParams } from '@/utils/utils.js'

import dayjs from "dayjs";

const beforeBack = () => {
	  return new Promise((resolve) => {
	    setTimeout(() => {
	      uni.redirectTo({
	      	url: '/pages/index/index'
	      });
		  return true;
	    }, 1000)
	  })
	}

const selectDate = ref('')
// 搜索关键词
const searchKeyword = ref('')
const dataInfo = reactive({"startDate":"2024-01-01","endDate":"2024-04-31"})
// 日期选择
const today = formatDate(new Date(), 'YYYY-MM-DD')
const startDate = ref(today)
const endDate = ref(today)
const showStartCalendar = ref(false)
const showEndCalendar = ref(false)

// 获取日期范围
const minDate = '2020-01-01'
const maxDate = today

// 分页相关
const paging = ref(null)
const recordList = ref([])
const showCalendarPopup = ref(false)
const openCalendarPopup = () => {
	  showCalendarPopup.value = true
	}
// 查询列表数据
const queryList = async (pageNo, pageSize) => {
	try {
		// 模拟数据
		const mockData = [
			{
				agentName: '代理商A',
				type: '保证金充值',
				time: '2024-01-20 14:30:00',
				amount: 1000.00,
				balance: 5000.00,
				status: 'success'
			},
			{
				agentName: '代理商B',
				type: '保证金充值',
				time: '2024-01-20 13:15:00',
				amount: 2000.00,
				balance: 8000.00,
				status: 'success'
			},
			{
				agentName: '代理商C',
				type: '保证金充值',
				time: '2024-01-20 11:45:00',
				amount: 1500.00,
				balance: 3000.00,
				status: 'failed'
			},
			{
				agentName: '代理商D',
				type: '保证金充值',
				time: '2024-01-19 16:20:00',
				amount: 3000.00,
				balance: 12000.00,
				status: 'success'
			},
			{
				agentName: '代理商E',
				type: '保证金充值',
				time: '2024-01-19 10:30:00',
				amount: 2500.00,
				balance: 7500.00,
				status: 'success'
			}
		]
		
		// 模拟筛选
		let filteredData = [...mockData]
		
		// // 按代理商名称过滤
		// if (searchKeyword.value) {
		// 	const keyword = searchKeyword.value.toLowerCase()
		// 	filteredData = filteredData.filter(item => 
		// 		item.agentName.toLowerCase().includes(keyword)
		// 	)
		// }
		
		// // 按日期范围过滤
		// if (startDate.value && endDate.value) {
		// 	const start = new Date(startDate.value).getTime()
		// 	const end = new Date(endDate.value).getTime() + 24 * 60 * 60 * 1000
		// 	filteredData = filteredData.filter(item => {
		// 		const recordDate = new Date(item.time).getTime()
		// 		return recordDate >= start && recordDate < end
		// 	})
		// }
		
		// 模拟分页
		const start = (pageNo - 1) * pageSize
		const end = start + pageSize
		const pageData = filteredData.slice(start, end)
		
		// 模拟网络延迟
		setTimeout(() => {
			paging.value.complete(pageData)
		}, 500)
	} catch (error) {
		paging.value.complete(false)
	}
}

// 处理搜索
const handleSearch = () => {
	paging.value.reload()
}

// 处理清除搜索
const handleClear = () => {
	searchKeyword.value = ''
	paging.value.reload()
}

// 处理日期选择
const handleStartDateSelect = (e) => {
	startDate.value = e.date
	showStartCalendar.value = false
	paging.value.reload()
}

const closeCalendarPopupPage = () =>{
		showCalendarPopup.value = false
		console.log(selectDate.value);
		let date = {
						"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
						"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
					}
		 Object.assign(dataInfo,date);
		 paging.value.reload();
	}

const handleEndDateSelect = (e) => {
	endDate.value = e.date
	showEndCalendar.value = false
	paging.value.reload()
}
onMounted(()=>{
    const firstDayOfMonth = dayjs().startOf('month');
		let date = {
						"startDate":firstDayOfMonth.format('YYYY-MM-DD'),
						"endDate":dayjs().format("YYYY-MM-DD")
					}
		Object.assign(dataInfo,date);
})
</script>

<style lang="scss">
.deposit-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 40rpx;
}

.search-section {
	padding: 30rpx; 
	
	:deep(.tn-search-box) {
		background-color: #fff;
		border-radius: 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
		
		.tn-search-box__input {
			height: 72rpx;
			font-size: 28rpx;
		}
		
		.tn-search-box__icon {
			font-size: 32rpx;
		}
	}
	
	.date-range {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.date-picker {
			flex: 1;
			display: flex;
			flex-direction: column;
			
			.date-label {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 8rpx;
			}
			
			.date-value {
				font-size: 28rpx;
				color: #333;
			}
		}
		
		.date-separator {
			margin: 0 20rpx;
			color: #999;
			font-size: 28rpx;
		}
	}
}

.record-list {
	padding: 0 30rpx;
	
	.record-item {
		background-color: #fff;
		padding: 24rpx 30rpx;
		margin-bottom: 20rpx;
		border-radius: 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.record-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
			
			.agent-info {
				.agent-name {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-right: 16rpx;
				}
				
				.record-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.record-amount {
				font-size: 36rpx;
				color: #ff6b6b;
				font-weight: bold;
				
				&.amount-plus {
					color: #4cd964;
				}
			}
		}
		
		.record-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.record-type {
				.type-text {
					font-size: 28rpx;
					color: #666;
					margin-right: 16rpx;
				}
				
				.balance-text {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.record-status {
				font-size: 24rpx;
				color: #ff6b6b;
				
				&.status-success {
					color: #4cd964;
				}
			}
		}
	}
}
</style> 